<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
	<meta charset="utf-8">

	<title>Search[Search_Key=]|Book System</title>

	<link rel="shortcut icon" href="assets/images/gt_favicon.png">
	<!-- Bootstrap -->
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css" rel="stylesheet">
	<!-- Icon font -->
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
	<!-- Fonts -->
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Alice|Open+Sans:400,300,700">
	<!-- Custom styles -->
	<link rel="stylesheet" href="{% static 'bookRecommand/css/styles.css' %}">
	<link rel="stylesheet" href="{% static 'bookRecommand/css/bookSystem.css' %}" />
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>

<!-- Logo与登录界面 -->
<header id="header">
	<div id="head" class="parallax" parallax-speed="1">

		<!--设置新书速递以及自动续借和续借全部书籍-->
		<ul class="setup">
			<li id="openNewBookPush">新书速递</li>
			<li id="openAutoBorrowPush">自动续借</li>
			<li id="openBorrowAllNoPush">续借全部书籍</li>
		</ul>

		<h1 id="logo" class="text-center">Szpt BookSystem</h1>
		<!--搜索条-->
		<div class="searchBar">
			<form action="/bookSystem/searchwithpymongo" method="GET">
				{% csrf_token %}
				<select name="find_code" id="find_code">
				     <option value="AllKeyButNotCatalog" selected="">所有字段(除目录)</option>
				     <option value="AllKey">所有字段</option>
				     <option value="CatalogKey">目录</option>
				     <option value="BookNameKey">题名关键词</option>
				     <option value="BookAuthorKey">著者</option>
				     <option value="BookPublisherKey">出版社</option>
				     <option value="ISBNKey">ISBN</option>
				     <option value="IndexKey">索书号</option>
				     <option value="SystemNumberKey">系统号</option>
			    </select>
				<input id="searchInput" type="text" name="searchKey" value="{{ searchKey }}" />
				<input type="submit" value="检索" />
				<div id="operate">
					<span id="label">排序：</span>
					<select name="sort" id="sort">
						<option value="Year-Rating-Person" selected="">年/评分/评论人数(降序)</option>
						<option value="Rating-Year-Person">评分/年/评论人数(降序)</option>
						<option value="Person-Year-Rating">评论人数/年/评分(降序)</option>
					</select>
				</div>
			</form>
		</div>

		<!--登录界面,登录之前-->
		{% if request.session.isLogin %}
		<div class="login topy">
			<p>
				<strong class="vwmy"><a href="" target="_blank" title="访问我的空间">{{request.session.userName}}</a></strong>
				<span class="pipe">|</span><a href="javascript:;" id="myitem" class="showmenu" onmouseover="showMenu({'ctrlid':'myitem'});" initialized="true">我的</a>
				<span class="pipe">|</span><a href="/bookSystem/ttest">设置</a>
				<span class="pipe">|</span><a href="/bookSystem/quitLogin">退出</a>
			</p>
		</div>
		{% else %}
		<form action="/bookSystem/login" method="POST">
			{% csrf_token %}
			<div class="topy login">
				<table cellspacing="0" cellpadding="0">
					<tbody>
						<tr>
							<td><label for="ls_username">帐号</label></td>
							<td><input type="text" name="username" id="ls_username" class="px vm xg1" value="学号/Email" onfocus="if(this.value == '学号/Email'){this.value = '';this.className = 'px vm';}" onblur="if(this.value == ''){this.value = '学号/Email';}" tabindex="901"></td>
							<td class="fastlg_l"><label for="ls_cookietime"><input type="checkbox" name="cookietime" id="ls_cookietime" class="pc" value="2592000" tabindex="903">自动登录</label></td>
						</tr>
						<tr>
							<td><label for="ls_password">密码</label></td>
							<td><input type="password" name="password" id="ls_password" class="px vm" autocomplete="off" tabindex="902"></td>
							<td class="fastlg_l"><button type="submit" class="pn vm" tabindex="904" style="width: 75px;"><em>登录</em></button></td>
						</tr>
					</tbody>
				</table>
				<input type="hidden" name="quickforward" value="yes">
				<input type="hidden" name="handlekey" value="ls">
			</div>
		</form>
		{% endif %}
	</div>

	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-collapse collapse">

				<ul class="nav navbar-nav">
					<li><a href="index.html">Home</a></li>
					<li><a href="blog.html">新书速递</a></li>
					<li class="active"><a href="about.html">About</a></li>
				</ul>

			</div>
		</div>
	</nav>
</header>

  <script type="text/javascript" >
  function getFiveStar(id,filled){
    var canvas = document.getElementById(id);
    var context = canvas.getContext("2d");
    context.beginPath();
    //设置是个顶点的坐标，根据顶点制定路径
    for (var i = 0; i < 5; i++) {
        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*8.5+8.5,
                        -Math.sin((18+i*72)/180*Math.PI)*8.5+8.5);
        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*4+8.5,
                        -Math.sin((54+i*72)/180*Math.PI)*4+8.5);
    }
    context.closePath();
    //设置边框样式以及填充颜色
    context.lineWidth="1";
    context.fillStyle = "#F5270B";
    context.strokeStyle = "#F5270B";
    if(filled){
    	context.fill();
    }
    context.stroke();
  }
  </script>
<!-- 主显示区域  -->
<main id="main">
	<div class="container">

		<div class="row topspace">

				<!--分页标签-->
				<div class="dividePage">
					<legend>
						本次搜索一共有{{totalCount}}条记录，当前页数为{{page}},总页数为{{ totalPage }},搜索上限为2000条记录
					</legend>
					<legend>
						<center class="">
							<ul class="pagination">
								{% if page <= 0 %}
									<li><a href="">«</a></li>
								{% else %}
									<li><a href="/bookSystem/searchwithpymongo?csrfmiddlewaretoken={{csrf}}&page={{page|add:-1}}&searchKey={{searchKey}}&find_code={{findCode}}&sort={{sortCode}}">«</a></li>
								{% endif %}

								{% if page|add:-5 > 0 %}
									<li><a href="/bookSystem/searchwithpymongo?csrfmiddlewaretoken={{csrf}}&page=0&searchKey={{searchKey}}&find_code={{findCode}}&sort={{sortCode}}">0</a></li>
									<li><a>.......</a></li>
								{% endif %}

								{% for p in range %}
									{% if p == page %}
										<li class="active"><a href="/bookSystem/searchwithpymongo?csrfmiddlewaretoken={{csrf}}&page={{p}}&searchKey={{searchKey}}&find_code={{findCode}}&sort={{sortCode}}">{{ p }}</a></li>
									{% else %}
										<li><a href="/bookSystem/searchwithpymongo?csrfmiddlewaretoken={{csrf}}&page={{p}}&searchKey={{searchKey}}&find_code={{findCode}}&sort={{sortCode}}">{{ p }}</a></li>
									{% endif %}
								{% endfor %}
								{% if page|add:5 >= totalPage %}

								{% else %}
									<li><a>.......</a></li>
								{% endif %}
								<li><a href="/bookSystem/searchwithpymongo?csrfmiddlewaretoken={{csrf}}&page={{totalPage}}&searchKey={{searchKey}}&find_code={{findCode}}&sort={{sortCode}}">{{totalPage}}</a></li>
								{% if page >= totalPage %}
									<li><a href="">»</a></li>
								{% else %}
									<li><a href="/bookSystem/searchwithpymongo?csrfmiddlewaretoken={{csrf}}&page={{page|add:1}}&searchKey={{searchKey}}&find_code={{findCode}}&sort={{sortCode}}">»</a></li>
								{% endif %}
							</ul>
						</center>
					</legend>
				</div>

			<!-- 搜索结果 -->
			<div class="searchResult">

				{% for data in books %}
				<article class="book">
					<div class="bookDetail">
						<div class="bookDetailTitle">
							<div class="bookImg">
								<!--<img height="150px" src="{% static 'bookRecommand/images/avatar_man.png' %}" />-->
							</div>
							<legend >
								<script>
									  $(document).ready(function(){
									  	{{ data.getRatingGraphic|safe }}.forEach(function(item,index,arr){
									  		getFiveStar("canvas"+item[0],eval(item[1]));
									  	});
									  })
								</script>
								<a href="/bookSystem/bookDetail/{{data.ISBN}}/">{{ data.bookName }}</a>
								<br/>
								<canvas id="canvas{{data.getRatingGraphic.0.0}}" height="17px" width="17px"></canvas>
								<canvas id="canvas{{data.getRatingGraphic.1.0}}" height="17px" width="17px"></canvas>
								<canvas id="canvas{{data.getRatingGraphic.2.0}}" height="17px" width="17px"></canvas>
								<canvas id="canvas{{data.getRatingGraphic.3.0}}" height="17px" width="17px"></canvas>
								<canvas id="canvas{{data.getRatingGraphic.4.0}}" height="17px" width="17px"></canvas>
								<span class="ratingScore">评分：{{ data.doubanRating }}</span>
								<span class="ratingScore">评分人数:{{ data.doubanRatingPerson }}</span>
							</legend>

						</div>
						<br/>
						<table class="bookDetailTable">
							<tr>
								<td class="bookDetailLabel">作者：</td>
								<td class="bookDetailContent">{{ data.author }}</td>
								<td class="bookDetailLabel">索书号：</td>
								<td class="bookDetailContent">{{ data.bookIndex }}</td>
							</tr>
							<tr>
								<td class="bookDetailLabel">出版社：</td>
								<td class="bookDetailContent">{{ data.publisher }}</td>
								<td class="bookDetailLabel">年份：</td>
								<td class="bookDetailContent">{{ data.publishYear }}</td>
							</tr>
							<tr>
								<td class="bookDetailLabel">馆藏复本:</td>
								<td class="bookISBN bookDetailContent">加载中....</td>
							</tr>
						</table>
					</div>
				</article>
				<br/>
				{% empty %}
					<p>暂无书籍</p>
				{% endfor %}
			</div>


			<!-- 右侧边栏 -->
			<aside class="col-md-4 sidebar sidebar-left right">

				<!-- 缩小查询范围 -->
				<div class="widget queryAssistance">
					<fieldset class="C">
					    <legend class="B">缩小查询范围</legend>
						<!-- 本次查询出现次数最多的十个年份 ,按大到小的顺序排列 ,可伸缩-->
						<span>年份:</span>
						<ul>
							{% for year in years %}
								<li><a href="/bookSystem/searchwithpymongo?csrfmiddlewaretoken={{csrf}}&page=0&searchKey={{searchKey}}&find_code={{findCode}}&year={{year}}">{{year}}</a></li>
							{% empty %}
								<li><a href="">暂无年份可缩小</a></li>
							{% endfor %}
						</ul>
						<span>分类:</span>
						<ul>
							<li><a href="">程序设计Tp312</a></li>
							<li><a href="">算法语言Tp312.1</a></li>
						</ul>
					</fieldset>
				</div>

				<!-- 常用标签栏 -->
				<div class="widget commonLabels">
					<fieldset class="C">
					    <legend class="B">常用标签栏</legend>
					    <span style="font-size: 28px;"><a href="">Unity</a></span>
					    <span style="font-size: 20px;"><a href="">Python</a></span>
					    <span style="font-size: 32px;"><a href="">Java</a></span>
					    <span style="font-size: 18px;"><a href="">算法</a></span>
					    <span style="font-size: 28px;"><a href="">Unity</a></span>
					    <span style="font-size: 20px;"><a href="">Python</a></span>
					    <span style="font-size: 32px;"><a href="">Java</a></span>
					    <span style="font-size: 18px;"><a href="">算法</a></span>
					</fieldset>
				</div>


				<!-- 本次查询中点击率最高的一本书 -->
				<div class="widget bestSearch">
					<fieldset class="C">
					    <legend class="B">本次查询点击率最高的书籍：</legend>
					    <div class="recommandImg">
					    	<p>此处预留图片</p>
				    	</div>
					    <span>书名:<a href="">游戏人工智能</a></span>
					    <br/>
					    <span>作者:xxxx</span>
					    <br/>
					    <span>点击量:xxxx</span>
					    <br/>
					</fieldset>
				</div>

			</aside>

		</div>

				<!--分页标签-->
				<div class="dividePage">
					<legend>
						<center class="">
							<ul class="pagination">
								{% if page <= 0 %}
									<li><a href="">«</a></li>
								{% else %}
									<li><a href="/bookSystem/searchwithpymongo?csrfmiddlewaretoken={{csrf}}&page={{page|add:-1}}&searchKey={{searchKey}}&find_code={{findCode}}&sort={{sortCode}}">«</a></li>
								{% endif %}

								{% if page|add:-5 > 0 %}
									<li><a href="/bookSystem/searchwithpymongo?csrfmiddlewaretoken={{csrf}}&page=0&searchKey={{searchKey}}&find_code={{findCode}}&sort={{sortCode}}">0</a></li>
									<li><a>.......</a></li>
								{% endif %}

								{% for p in range %}
									{% if p == page %}
										<li class="active"><a href="/bookSystem/searchwithpymongo?csrfmiddlewaretoken={{csrf}}&page={{p}}&searchKey={{searchKey}}&find_code={{findCode}}&sort={{sortCode}}">{{ p }}</a></li>
									{% else %}
										<li><a href="/bookSystem/searchwithpymongo?csrfmiddlewaretoken={{csrf}}&page={{p}}&searchKey={{searchKey}}&find_code={{findCode}}&sort={{sortCode}}">{{ p }}</a></li>
									{% endif %}
								{% endfor %}
								{% if page|add:5 >= totalPage %}

								{% else %}
									<li><a>.......</a></li>
								{% endif %}
								<li><a href="">{{totalPage}}</a></li>
								{% if page >= totalPage %}
									<li><a href="">»</a></li>
								{% else %}
									<li><a href="/bookSystem/searchwithpymongo?csrfmiddlewaretoken={{csrf}}&page={{page|add:1}}&searchKey={{searchKey}}&find_code={{findCode}}&sort={{sortCode}}">»</a></li>
								{% endif %}
							</ul>
						</center>
					</legend>
				</div>

	</div>

</main>

<footer id="footer" class="topspace">
	<div class="container">
		<div class="row">




			<div class="col-md-3 widget">
				<h3 class="widget-title">Text widget</h3>
				<div class="widget-body">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, nihil natus explicabo ipsum quia iste aliquid repellat eveniet velit ipsa sunt libero sed aperiam id soluta officia asperiores adipisci maxime!</p>

				</div>
			</div>

			<div class="col-md-3 widget">
				<h3 class="widget-title">Form widget</h3>
				<div class="widget-body">
					<p>+234 23 9873237<br>
						<a href="mailto:#">some.email@somewhere.com</a><br>
						<br>
						234 Hidden Pond Road, Ashland City, TN 37015
					</p>
				</div>
			</div>

		</div> <!-- /row of widgets -->
	</div>
</footer>
</body>
</html>
